{% extends "base.html" %}

{% block title %}编辑签到{% endblock %}

{% block head %}
{{ super() }}
<link href="{{ static_url('har/editor.css') }}" rel="stylesheet" type="text/css">
<script src="{{ static_url('components/angular/angular.min.js') }}"></script>
<script src="{{ static_url('components/js-base64/base64.js') }}"></script>
{% endblock %}

{% block body %}
<script>
  TPLID = {{ tplid or 0 }};
  HASUSER = {{ 1 if current_user else 0 }};
  HARPATH = "{{ harpath }}";
  HARNAME = "{{ harname }}";
  HARDATA = "{{ hardata }}";
</script>

<script src="{{ static_url('components/draggable-polyfill/lib/draggable-polyfill.js') }}"></script>

<div class="container">
  <div class="row" ng-controller="EntryList">
    <div class="col-md-3" id="editor-switch">
      <a class="h1-index" href="/">
        <h1 class="text-center">签到<sup>{{ version }}</sup></h1>
      </a>
{% raw %}
      
      <!--checked switch-->
      <div class="list-group">
        <a ng-class="{active: !filter.checked && !filter.recommend}" class="list-group-item" href="javascript:void(0);" ng-click='filter.recommend=undefined;filter.checked=undefined'>
          <span class="badge">{{ har.log.entries.length }}</span>
          所有请求 / All Requests
        </a>
        <a ng-class="{active: filter.checked}" class="list-group-item" href="javascript:void(0);" ng-click='filter.recommend=undefined;filter.checked=true'>
          <span class="badge">{{ (har.log.entries|filter:{checked:true}).length }}</span>
          已选择请求 / Select Requests
        </a>
        <a ng-class="{active: filter.recommend}" class="list-group-item" href="javascript:void(0);" ng-click='recommend();filter.recommend=true;filter.checked=undefined'>
          推荐关联请求 / Recommended &gt;
        </a>
      </div>

      <!-- mime type -->
      <div class="list-group">
        <a href="javascript:void(0);" class="list-group-item"
          ng-repeat="(name, key) in {
            All: undefined,
            Documents: 'document',
            Javascript: 'javascript',
            Styles: 'style',
            Images: 'image',
            Media: 'media',
            Others: 'other'
          }"
          ng-class="{active: filter.filter_mimeType == key}"
          ng-click="filter.filter_mimeType = key">
          <span class="badge">{{ (har.log.entries | filter: badge_filter({filter_mimeType: key})).length }}</span>
          {{ name }}
        </a>
      </div>

      <!-- xhr && cookie -->
      <div class="list-group">
        <a href="javascript:void(0);" class="list-group-item"
          ng-class="{active: filter.filter_xhr}"
          ng-click="filter.filter_xhr = filter.filter_xhr ? undefined : true">
          <span class="badge">{{ (har.log.entries | filter: badge_filter({filter_mimeType: filter.filter_mimeType, filter_xhr: true})).length }}</span>
          XMLHttpRequest
        </a>
        <a href="javascript:void(0);" class="list-group-item"
          ng-class="{active: filter.filter_set_cookie}"
          ng-click="filter.filter_set_cookie = filter.filter_set_cookie ? undefined : true">
          <span class="badge">{{ (har.log.entries | filter: badge_filter({filter_mimeType: filter.filter_mimeType, filter_set_cookie: true})).length }}</span>
          Set-Cookie
        </a>
        <a href="javascript:void(0);" class="list-group-item"
          ng-class="{active: filter.filter_variables}"
          ng-click="filter.filter_variables = filter.filter_variables ? undefined : true">
          <span class="badge">{{ (har.log.entries | filter: badge_filter({filter_mimeType: filter.filter_mimeType, filter_variables: true})).length }}</span>
          请求中有变量
        </a>
      </div>

    </div>

    <!-- entries list -->
    <div class="col-md-9" id="entries">
      <div ng-switch="(har.log.entries | filter: {checked: true}).length">
        <div class="alert alert-info" role="alert" ng-switch-when="0">
          请分析定位 <strong>签到</strong> 请求，在请求前打勾，如果推荐的请求中没有，请在右侧筛选
        </div>
        <div class="alert alert-info" role="alert" ng-switch-when="1">
          您可以再次点击
          <a href="javascript:void(0);" ng-click="recommend();filter.recommend=true;filter.checked=undefined">推荐关联请求</a>
          ，帮助定位 <strong>登录</strong> 请求，点击 URL 编辑请求，为其加入用户名、密码变量
        </div>
        <div class="alert alert-info" role="alert" ng-switch-default>
          完成登录请求定位后，请<strong>依次</strong>点击每个
          <a href="javascript:void(0);" ng-click="filter.recommend=undefined;filter.checked=true">已选择请求</a>
          ，切换到 <strong>测试</strong> 面板，对请求进行测试。
        </div>
      </div>

      <div class="list-group" allowdrop id="droplist" ondragover="droplistFunc(event)">
        <input type="checkbox"  name="sortBtn" id="sortBtn" onchange="sortRequest(this)">显示序号
        <button type="button" name="Delete_seleted_Btn" id="Delete_seleted_Btn" >删除</button>

        <li class="list-group-item pageref"
          ng-repeat-start="entry in har.log.entries | filter: filter | filter: track_item()"
          ng-if="filted[$index-1].pageref != entry.pageref">
          {{ entry.pageref }}
        </li>

        <a href="javascript:void(0);" class="list-group-item entry"  ng-repeat-end draggable="true" ondragstart="dragstartFunc(event)" ondragend="dragendFunc(event)">
          <div class="entry-checked">
            <input ng-model="entry.checked" ng-click="save_change()" type="checkbox">
          </div>
          <span class="label pull-right label-primary" ng-show="entry.comment">{{ entry.comment }}</span>
          <span class="label pull-right {{ status_label(entry.response.status) }}">{{ entry.response.status }}</span>
          <span class="label pull-right label-info" ng-show="entry.filter_set_cookie">set-cookie</span>
          <span class="label pull-right label-warning" ng-show="entry.filter_xhr">XHR</span>
          <span class="label pull-right label-primary" ng-repeat="variable in variables_in_entry(entry)"><span ng-non-bindable>{{ </span>{{ variable }}<span ng-no-bindable> }}</span></span>
          <span class="label label-default pull-right" ng-repeat="tag in entry.check_tag">{{ tag }}</span>
          <span class="label" ng-class="{
            'label-warning': (entry.request.method != 'GET'),
            'label-primary': (entry.request.method == 'GET')
            }">{{ entry.request.method }}</span>
          <span class="entry-url" ng-click="edit(entry)">{{ entry.request.url || ":empty" }}</span>
        </a>

        <li href="javascript:void(0);" class="list-group-item entry" ng-if="filted.length > 0" draggable="false">
          <div class="entry-checked">
            <input ng-model="is_check_all" ng-click="check_all(!is_check_all)" type="checkbox">
          </div>
          <a href="javascript:void(0);" ng-click="check_all()">全选</a> |
          <a href="javascript:void(0);" onClick="reserve_check()">反选</a>
        </li>

        <li class="list-group-item" ng-if="filted.length == 0">过滤条件下没有请求</li>
      </div>
      <!-- ./entries list -->

      <div class="text-right">
        <button class="btn btn-default" data-toggle="modal" data-target="#upload-har" >追加HAR</button>
        <a id="download-har" target="_blank" class="btn btn-default" ng-click="download()">下载</a>
        <button class="btn btn-default" data-toggle="modal" data-target="#test-har" ng-click="pre_save()">测试</button>
        <button ng-if="!readonly" class="btn btn-primary" data-toggle="modal" data-target="#save-har" ng-click="pre_save()">保存</button>
      </div>

      <!-- test har -->
      <div class="modal fade" id="test-har">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">测试HAR</h4>
            </div>
            <div class="modal-body">
              <div class="result"></div>
              <div class="form-horizontal" role="form">

                <div class="form-group" ng-repeat="var in env">
                  <label class="col-sm-3 control-label">{{ var.name }}</label>
                  <div ng-if="var.name.toLowerCase() != 'cookie'" class="col-sm-9">
                    <input ng-model="var.value">
                  </div>
                  <div ng-if="var.name.toLowerCase() == 'cookie'" class="col-sm-9">
                    <input ng-model="var.value">
                    <a ng-if="setting.siteurl" href="javascript:void(0)" data-toggle="get-cookie" data-site="{{ setting.siteurl.indexOf('http') == 0 ? setting.siteurl : 'http://'+setting.siteurl }}" data-cookie="" disabled>点击获取</a>
                  </div>
                </div>

              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-loading-text="loading..." ng-click="test()">测试</button>
            </div>
          </div>
        </div>
      </div>

      <!--save modal -->
      <div class="modal fade" id="save-har">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">保存HAR</h4>
			  <!-- 编辑HAR保存-增加时间转换工具 -->
			  <a href="http://tool.chinaz.com/Tools/time" id="har-guide" class="btn btn-default" target="_blank" style="position:absolute;margin:10px 10px;top:0;right:0;">时间转换工具</a>
            </div>
            <div class="modal-body">
              <div class="alert alert-danger" role="alert" style="display: none;">
                <strong>Oh snap!</strong> Change a few things up and try submitting again.
              </div>
              <div class="alert alert-info" role="alert" style="display: none;">
                <strong>Oh snap!</strong> Change a few things up and try submitting again.
              </div>
              <div class="form-horizontal" role="form">

                <div class="form-group">
                  <label class="col-sm-3 control-label">网站名</label>
                  <div class="col-sm-9">
                    <input ng-model="setting.sitename" placeholder="请输入 网站名称">
					<span class="label label-info">尽可能填写14字符以内</span>
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-sm-3 control-label">网站地址</label>
                  <div class="col-sm-9">
                    <input ng-model="setting.siteurl" placeholder="请输入 网站地址">
					<span class="label label-info">尽可能精简网址(保证美观)</span>
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-sm-3 control-label">备注</label>
                  <div class="col-sm-9">
                    <input ng-model="setting.note" placeholder="作者、版本号、功能详情等">
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-sm-3 control-label">间隔</label>
				  <!-- 编辑HAR保存-更改选择时间以及增加自定义按钮 -->
                  <div name="nextSibling" style="col-sm-9;margin-left:165px;">
                    <span class="ng-pristine ng-valid" style="margin-left:100px;width:18px;overflow:hidden;">
                    <select style="height:30px;margin-left:-100px;" onchange="this.parentNode.nextSibling.value=this.value;">
					  <option selected="selected" value="">请选择</option>
					  <option value="31536000">每年</option>
					  <option value="7884000">每季</option>
					  <option value="2626560">每月</option>
                      <option value="604800">每周</option>
					  <option value="" disabled>-----------------</option>
                      <option value="86399">每天</option>
					  <option value="" disabled>-----------------</option>
                      <option value="82800">每23小时</option>
                      <option value="43200">每12小时</option>
                      <option value="7200">每2小时</option>
                      <option value="3600">每小时</option>
					  <option value="" disabled>-----------------</option>
					  <option value="3000">每50分钟</option>
					  <option value="2700">每45分钟</option>
					  <option value="1800">每30分钟</option>
					  <option value="60">每1分钟</option>
					  <option value="" disabled>最短1分钟!</option>
					</select></span><input id="jiange_second" style="width: 81px;position:absolute;margin: 0px 11px;" ng-model="setting.interval">
					<input placeholder="秒" class="ng-pristine ng-valid" style="width:25px;position:absolute;margin:0px 90px;background-color:#ffffff;" disabled="value">
					<p style="color:#000;">菜单选择时间或直接右侧写数据<br>不选默认为:每天</p>
					</div>
                </div>

              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-loading-text="保存中..." ng-click="save()">保存</button>
            </div>
          </div>
        </div>
      </div>
      <!-- /.save modal -->
      
    </div>
{% endraw %}
{% include "har/entry_editor.html" %}
{% raw %}

  <!-- upload modal -->
  <div class="modal fade" id="upload-har" ng-controller="UploadCtrl">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">上传HAR</h4>
          <a href="https://www.quchao.net/QianDaoEXP.html" id="har-guide" class="btn btn-default" target="_blank">使用帮助</a>
        </div>
        <div class="modal-body">
          <div class="alert alert-danger" role="alert" style="display: none;">
            <strong>Oh snap!</strong> Change a few things up and try submitting again.
          </div>
          <div class="alert alert-info" role="alert" ng-if="local_har">
            您有一个正在编辑的 HAR 文件（{{ local_har }}），是否打开？
            <a href="javascript:void(0);" ng-click="load_local_har()">[ 打开 ]</a> /
            <a href="javascript:void(0);" ng-click="delete_local()">[ 删除 ]</a> 
          </div>
          <div class="form-horizontal" role="form">
            <div class="form-group">
              <label class="col-sm-3 control-label">上传 HAR 文件</label>
              <div class="col-sm-9">
                <input type="file">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">用户名</label>
              <div class="col-sm-9">
                <input ng-model="username">
                <p class="help-block">登录目标网站时输入的用户名，用于变量替换</p>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">密码</label>
              <div class="col-sm-9">
                <input ng-model="password">
                <p class="help-block">登录目标网站时输入的密码，用于变量替换</p>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-loading-text="Loading..." ng-click="add_local()">追加</button>
          <button type="button" class="btn btn-primary" data-loading-text="Loading..." ng-click="upload()">上传</button>
        </div>
      </div>
    </div>
  </div><!-- /.modal -->
</div>
<script>
  seajs.use('/static/har/editor', function(main) {
    main.init()
  });
</script>
<script>
  function sortRequest(checkbox){
      var RequestIndex = 1;
      document.querySelectorAll('#droplist>a.list-group-item.entry').forEach(function(el){
      var tmp = el.getElementsByClassName('entry-checked')[0]
      if (tmp.getElementsByTagName('input')[0].checked)
      {
        if (checkbox.checked) {
            tmp.childNodes[2].data = RequestIndex.toString();
            RequestIndex += 1;
        }
        else {
          tmp.childNodes[2].data = ""
        }
      }
      else {
        tmp.childNodes[2].data = ""
      }
    });
  }
</script>
<script>
  var currentDragItem = null;
  var StartY = 0;
  var startIndex = 0;
  var offsetY = 0;
  var maxIndex = 0;

  function resortEntryList() {
    DragIndex = 0;
    document.querySelectorAll('#droplist>a.list-group-item.entry').forEach(function(el){
      el.setAttribute('dragid',DragIndex);
      DragIndex += 1;
    });
    maxIndex = DragIndex;
  };
  function dragstartFunc(ev) {
    resortEntryList();
    StartY = parseInt(ev.clientY);
    startIndex = parseInt(ev.srcElement.getAttribute('dragid'));
    currentDragItem = ev.srcElement;
    offsetY = ev.offsetY;
  }

  function dragendFunc(ev) {
    var C_height = parseInt(ev.srcElement.clientHeight);
    var EndY = parseInt(ev.clientY)
    var EndIndex = 0;
    if (EndY > StartY)
    {
      EndIndex = (parseInt(startIndex + ((EndY-StartY)/C_height)));
    }
    else
    {
      EndIndex = (parseInt(startIndex + ((EndY-StartY)/C_height) + 1));
    }
    var tmp = window.global_har.har.log.entries[startIndex];
    if (EndIndex > startIndex)
    {
      window.global_har.har.log.entries.splice(EndIndex+1, 0, tmp);
      window.global_har.har.log.entries.splice(startIndex, 1);
    }
    else
    {
      window.global_har.har.log.entries.splice(EndIndex, 0, tmp);
      window.global_har.har.log.entries.splice(startIndex+1, 1);
    }
    

    resortEntryList();
    sortRequest($('#sortBtn')[0]);
    currentDragItem = null;
  }

  function droplistFunc (ev) {
      ev.preventDefault();
      if(!currentDragItem){ return }
      var dragitem = ev.target.closest('.list-group-item.entry');
      if(dragitem){
          if(ev.offsetY>offsetY){
            tmp = ev.srcElement.getAttribute('dragid')
            if (tmp){
              dragitem.after(currentDragItem);
            }
          }else{
              dragitem.before(currentDragItem);
          }
      }
  }
</script>
<script>
  $(function() {
    $('#Delete_seleted_Btn').on('click', function() {
      var RequestIndex = 0;
      var Indexs = new Array();
      var es = document.querySelectorAll('#droplist>a.list-group-item.entry');
      window.global_har.har.log.entries.forEach(function(entry){
        if (entry.checked){
          es[RequestIndex].parentNode.removeChild(es[RequestIndex]);
          Indexs.splice(0, 0, entry);
        }
        RequestIndex += 1;
      });
      Indexs.forEach(function(entry){
        window.global_har.har.log.entries.splice(window.global_har.har.log.entries.indexOf(entry), 1)
      });
    });
  })
</script>
{% endraw %}
<script src="{{ static_url('components/editor_js.js') }}"></script>
{% endblock %}